<template>
    <div class="address">
        <van-nav-bar title="收货地址" left-arrow @click-left="onClickLeft" />
        <ul class="address-list">
            <li v-for="(item,index) in list" :key="index">
                <div>
                    <div class="title">
                        <span class="name">{{ item.name }}</span>
                        <span>{{ item.phone }}</span>
                    </div>
                    <div class="address-txt">{{ item.address }} {{ item.address_detail }}</div>
                </div>
                <div class="delete" @click="setAddress(item.id)">删除</div>
            </li>
        </ul>
        <div class="new-address" @click="goPage('Newaddress')">新增地址<van-icon name="plus" /></div>
    </div>
</template>

<script lang="ts">
import { defineComponent,ref,onMounted } from 'vue'

import {useRouter} from 'vue-router'

import axios from 'axios'

export default defineComponent({
    name:'Address',
    setup () {

        let router: any = useRouter();

        // 用户id
        let userId:number = 76942;

        let addressList:any = ref<Array<any>>([]);
        
        // 返回上一页
        const onClickLeft = () => history.back();

        const chosenAddressId = ref('1');

        let list= ref<Array<any>>([]);

        //跳转新增地址 页面
        let goPage: (name: string) => void = (name:  string): void => {
            router.push({name});
        }

        // 获取收货地址
        let getAddress:(id:number) => void = (id:number):void => {
            axios({
                method:'get',
                url:`https://elm.cangdu.org/v1/users/${id}/addresses`,
            }).then(res => {
                console.log('res==>',res);
                list.value = res.data;
                // console.log('list==>',list);
                
            }).catch(err => {
                console.log('err==>',err);
                
            })
        }

        // 删除收货地址
        let setAddress:(id:number) => void = (id:number):void => {
            for(let i = 0 ; i < list.value.length ; i++){
                if(list.value[i].id === id){
                    list.value.splice(i,1);
                }
            }
            console.log('list.value==>',list.value);
            
        }

        onMounted(() => {
            getAddress(userId);
        })

        return {
            list,
            chosenAddressId,
            addressList,

            // 方法
            onClickLeft,
            goPage,
            setAddress
        }
    }
})
</script>

<style lang="scss" scoped>
.new-address{
    width: 140px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #3190e8;
    color: #ffffff;
    margin: 0 auto;
    border-radius: 20px;
}
.address-list{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    li{
        width: calc(100% - 20px );
        background-color: #f8f8f8;
        box-shadow: 0px 0px 5px 4px #ddd;
        padding: 10px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .delete{
            width: 60px;
            height: 30px;
            background-color: #f00;
            color: #ffffff;
            font-size: 14px;
            line-height: 30px;
            text-align: center;
        }
        .title{
            font-size: 16px;
            .name{
                margin-right: 8px;
            }
        }
        .address-txt{
            color: #999;
            font-size: 14px;
        }
    }
}

::v-deep .van-nav-bar__content {
    background-color: #3190e8;
}

::v-deep .van-nav-bar__title {
    color: #ffffff;
    font-size: 18px;
    font-weight: normal;
}

::v-deep .van-nav-bar .van-icon {
    color: #ffffff;
    font-size: 22px;
}

::v-deep .van-hairline--bottom::after {
    border-bottom-width: 0;
}
</style>